<template>
  <div>
    在
    <el-date-picker
      v-model="listTime"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    将客户的阶段变更为：

    <el-row>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">新客户</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">初步沟通</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">持续跟进</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">商机</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">成交</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">多次成交</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">已输单</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="ge">
          <div class="smallFont">无效</div>
          <div class="bigFont">0</div>
        </div>
      </el-col>
    </el-row>

    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column prop="groupName" label="客户" width="150" fixed>
      </el-table-column>
      <el-table-column prop="lordName" label="当前客户阶段" width="150">
      </el-table-column>
      <el-table-column prop="groupTag" label="客户标签" width="150">
      </el-table-column>
      <el-table-column prop="PeopleNum" label="内容标签" width="150">
      </el-table-column>
      <el-table-column sortable prop="join" label="创建时间" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="负责人" width="150">
      </el-table-column>
      <el-table-column sortable prop="quit" label="上次跟进" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="电话" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="描述" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="姓名" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="客户意向" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="客户来源" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="性别" width="150">
      </el-table-column>
      <el-table-column prop="quit" label="生日" width="150">
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div style="display: flex; justify-content: flex-end;">
      <div style="width: 450px; height: 60px;">
        <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
  name: "transformList",

  data() {
    return {
      listTime: '',
      // 是否加载
      loading: false,
      // 列表数据
      listData: [],
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },

    }
  },
  methods: {
    // 分页插件事件
    callFather(parm) {
      this.formInline.page = parm.currentPage
      this.formInline.limit = parm.pageSize
      this.getdata(this.queryData)
    },
  },
  // 注册组件
  components: {
    Pagination
  },
}
</script>

<style scoped>
.ge {background: rgb(237,242,253); margin: 10px 5px 30px 5px; padding: 10px 15px; border-radius: 5px;}

.smallFont {font-weight: 600; font-size: 14px;}
.bigFont {font-weight: 700; font-size: 35px;}
</style>
